<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" title="主机列表" width="500px" top="5vh" class="theme1"
       @open="openHandle"
       @close="closeHandle"
       :close-on-click-modal="false"
       ref="elDialog">
   	<slot>
    <el-card ref="elCard" class="theme2">
       <div  slot="header" class="clearfix" style="padding: 0px 0px;">
         <el-button style="float: right; padding: 3px 0" type="text">
            <el-input
               style="height:30px"
               ref="searchInput"
               placeholder="请输入内容"
               prefix-icon="el-icon-search"
               @change="searchChange"
            ></el-input>
         </el-button>
       </div>
        <div>
           <el-table v-loading="loading" :data="alarmData" size="small" highlight-current-row style="width: 100%;" stripe>
             <el-table-column :show-overflow-tooltip="true" prop="hostname" label="主机名"/>
             <el-table-column :show-overflow-tooltip="true" prop="ip" label="ip"/>
             <el-table-column label="状态" align="center">
               <template slot-scope="scope">
                  <div v-for="item in statusList" :key="item.id">
                    <el-tag v-if="scope.row.status === item.id" :type="item.type">{{ item.value }}</el-tag>
                  </div>
                </template>
                </el-table-column>
              </el-table>
       </div>
     </el-card>
     </slot>
       <span slot="footer" class="dialog-footer">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next"
          :total="total">
        </el-pagination>
       </span>
  </el-dialog>
</template>    

<script>
export default {
    props:{
        //statusList:[{id:1,value:'正常'},{id:2,value:'异常'},{id:3,value:'中断'}],
    },
    data(){
      return {
          dialog: this.dialog,
          loading: false,
          alarmData: [],
          storeData: [],
          statusList:[{id:1,value:'正常',type:''},{id:2,value:'异常',type:'warning'},{id:3,value:'中断',type:'danger'}],
          title: '',
          pageSize: 10,
          currentPage: 1,
          total: 0,
          searchValue : '',
      };
    },
    render() {
      console.log('render',this.$refs);
    },
    methods: {
      searchChange(v) {
        this.searchValue = v ;
        if(v){
          var result = [];
          for(var item in this.storeData){
            var obj = this.storeData[item];
            if(obj.hostname.indexOf(v)>=0) {
               result.push(obj);
            }
          };
          this.alarmData = result.slice(0,this.pageSize);
          this.total = result.length ;
          this.currentPage = 1 ;
        } else {
          this.alarmData = this.storeData.slice(0,this.pageSize);
          this.total = this.storeData.length ;
          this.currentPage = 1 ;
        }
      },
      handleSizeChange(v) {
        this.pageSize = v ;
        this.currentPage = 1;
        this.handleCurrentChange(1);
      },
      handleCurrentChange(v){
        if(this.searchValue) {
          var result = [];
          for(var item in this.storeData){
            var obj = this.storeData[item];
            if(obj.hostname.indexOf(this.searchValue)>=0) {
               result.push(obj);
            }
          };
          this.alarmData = result.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
        }else{
          this.alarmData = this.storeData.slice((v-1)*this.pageSize,v*this.pageSize);
        }
    },
    closeHandle() {
      this.searchValue="";
      this.$refs.searchInput.clear();
    },
    openHandle() {
      //this.$refs.elCard.$el.children[0].children[1].style.padding = "10px 10px";
      console.log('get',document.getElementsByClassName('el-dialog__body').length);
      console.log('get',document.getElementsByClassName('el-dialog__body'));
      console.log(this.$refs.elDialog);
    },
  },  
}
</script>

<style lang="scss">
.theme1 {
   .el-dialog {
     .el-dialog__header{
      padding: 10px 10px;
     };
     .el-dialog__body {
      padding: 5px 5px;
     };
     .el-dialog__footer {
      padding: 5px 5px;
     };
  };
  .el-dialog {
     padding: 5px 10px;
  }
}

.theme2 {
  .el-card {
  }
  .el-card__body {
     padding-top: 5px;
     padding: 0px;
   }
  .el-card__header {
    padding: 2px 2px;
  }
}

.el-input__inner {
  height: 30px;
}

.el-tag {
  height: 30px;
}

.el-table--small th, .el-table--small td {
  padding: 2px 0px;
}

.el-table th > .cell {
   color:black;
   font-weight:bold;
}
.el-input__icon {
  height: 30px;
}
</style>
